﻿<!DOCTYPE html>
<html>
<head>
    <title>地图导览</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta charset="utf-8"/>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.css" />
 

    <link href="//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="css/L.Control.Locate.min.css" />
    <!--[if lt IE 9]>
    <link rel="stylesheet" href="css/L.Control.Locate.ie.min.css"/>
    <![endif]-->

    <link href="css/mapScenic.css" rel="stylesheet" />
    <style>

        #map {
            height: 100%;
            width: 100%;
        }
    </style>


</head>

<body>
<p id="txtlatlng"></p>
<div id="map"></div>
<div class="map_location_status" data-bind="visible :statusbox.show" style="display: none;">
    <div class="map_location_status_text" data-bind="text:statusbox.text"></div>
    <div class="map_location_status_ok" data-bind="click:statusbox.close">确 定</div>
</div>
<div class="form-grouping atfront " data-bind="css:{menu_acitve:pointMenu.show}" >
<div class="map_nav_bar_v2">

    <div class="map_nav_item_03" data-bind="click:togglemenu"></div>

</div>
    <div class="map_menu_containner cf"  data-bind="visible:pointMenu.show">
        <a class="map_menu_ico active" data-bind="css:{'active': pointMenu.activeType() == 'spot','disabled': !pointMenu.isEnabled.spot()},click:pointMenu.showTag.bind($data,'spot')" href="javascript:;" ><i class="poi-img fa fa-tree fa-2x"></i>景点</a>
        <a class="map_menu_ico" data-bind="css:{'active': pointMenu.activeType() == 'eat','disabled': !pointMenu.isEnabled.eat()},click:pointMenu.showTag.bind($data,'eat')" href="javascript:;" ><i class="poi-img fa fa-cutlery fa-2x"></i>美食</a>
        <a class="map_menu_ico" data-bind="css:{'active': pointMenu.activeType() == 'hotel','disabled': !pointMenu.isEnabled.hotel()},click:pointMenu.showTag.bind($data,'hotel')" href="javascript:;" ><i class="poi-img fa fa-hotel fa-2x"></i>酒店</a>
        <a class="map_menu_ico" data-bind="css:{'active': pointMenu.activeType() == 'wc','disabled': !pointMenu.isEnabled.wc()},click:pointMenu.showTag.bind($data,'wc')" href="javascript:;" ><i class="poi-img fa fa-male fa-2x"></i>洗手间</a>
        <a class="map_menu_ico" data-bind="css:{'active': pointMenu.activeType() == 'shop','disabled': !pointMenu.isEnabled.shop()},click:pointMenu.showTag.bind($data,'shop')" href="javascript:;" ><i class="poi-img fa fa-car fa-2x"></i>停车场</a>
        <a class="map_menu_ico" data-bind="css:{'active': pointMenu.activeType() == 'show','disabled': !pointMenu.isEnabled.show()},click:pointMenu.showTag.bind($data,'show')" href="javascript:;"  ><i class="poi-img fa fa-university fa-2x"></i>游牧点</a>
        <a class="map_menu_ico" data-bind="css:{'active': pointMenu.activeType() == 'help','disabled': !pointMenu.isEnabled.help()},click:pointMenu.showTag.bind($data,'help')" href="javascript:;"  ><i class="poi-img fa fa-road fa-2x"></i>栈道</a>
        <a class="map_menu_ico " data-bind="css:{'active': pointMenu.activeType() == 'wifi','disabled': !pointMenu.isEnabled.wifi()},click:pointMenu.showTag.bind($data,'wifi')" href="javascript:;"><i class="poi-img fa fa-home fa-2x"></i>定居点</a>

    <!--<a class="map_menu_ico_08" data-bind="{'active': pointMenu.activeType == 'spot','disabled': pointMenu.isEnabled(spot)}" href="{{host}}/scenic/{{scenicId}}/detail">景区概述</a>-->
</div>

</div>
<div style="display: none">
    <div class="marker-list" data-bind="foreach:markers">
        <div class="marker" data-bind="click:$root.showtip">
            <i class="point"></i>
            <div class="tip" data-bind="attr:{id:'tip_'+id}">
                <div class="tip-title">
                    <h3 data-bind="text:name"></h3>

                </div>
                <div class="tip-content" data-bind="text:remark"></div>
                <div class="tip-bottom">
                    <ul>
                        <li ><a data-bind="attr:{href:url}">
                            <i class="fa fa-info-circle fa-lg" style="    color: #1d9d74;
    margin-right: 5px;"></i><span>查看详情</span>
                            </a></li>
                        <li ><a data-bind="attr:{href:'map_address.html?id=' + id+'&wid='+$root.params().wid+'&type=scenic&uselocale=true'}">
                            <i class="fa fa-map-marker fa-lg" style="    color: #1d9d74;
    margin-right: 5px;"></i><span>去这里</span></a></li>
                    </ul>
                </div>

            </div>
        </div>
    </div>


</div>

<script src="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.js"></script>

<script src="js/L.Control.Locate.min.js"></script>
    <script src="js/bouncemarker.js"></script>
    <script src="../../scripts/jquery/zepto.min.js"></script>
<script src="../../scripts/knockout/knockout-3.3.0.js"></script>

    <script type="text/javascript">
        var ViewModel = function(params) {
            var self = this;
            this.params=ko.observable(params);
            this.map=ko.observable();
            this.mapborder=ko.observable();
            this.markers = ko.observableArray();
            this.statusbox = {
                text: ko.observable('亲，你不在景区内，赶紧去景区试试吧！')
                , show: ko.observable(false), close: function () {
                self.statusbox.show(false);

            }};
            this.pointMenu={
                show:ko.observable(false),
                activeType:ko.observable('spot'),
                isEnabled:{
                    spot:ko.observable(true),
                    eat:ko.observable(true),
                    hotel:ko.observable(true),
                    wc:ko.observable(false),
                    shop:ko.observable(false),
                    show:ko.observable(false),
                    help:ko.observable(false),
                    wifi:ko.observable(false)

                },
                showTag:function(type){
                    if(self.pointMenu.isEnabled[type]())
                    {
                        self.pointMenu.activeType(type);
                    }
                    var wid=self.params().wid;
                    switch (type)
                    {
                        case 'spot':
                            self.jumpUrl('poilist.html?type=scenic&wid=' + wid);
                            break;
                        case 'hotel':
                            self.jumpUrl('poilist.html?type=hotel&wid=' + wid);
                            break;
                        case 'eat':
                            self.jumpUrl('poilist.html?type=catering&wid=' + wid);
                            break;
                    }
                }
            };

            this.init=function(){
                self.initmap(40.0625, 116.34375);
//                self.initmap(39.99530029296875, 116.35028839111328);
           //     self.initmap(39.99530029296875, 116.35028839111328);
                self.addlocation();//添加定位服务
                var imageurl="http://www.cloudorg.com.cn/weixin/map/images/map.jpg";
//                self.addScenicLayer(imageurl);//添加景区图层
                self.addtileLayer();//添加缩放图层
                self.bindevent();//添加绑定事件

                this.loadData();
            };

            this.initmap=function(lat,lng)
            {
                var mapMinZoom = 3;
                var mapMaxZoom = 5;
                var map = L.map('map', {
                    maxZoom: mapMaxZoom,
                    minZoom: mapMinZoom,
                    attributionControl: false,
                    crs: L.CRS.Simple
                });
                var mapsize = self.getMapSize();
//                var _mapCenter =map.unproject([mapsize.width/2,mapsize.height/2], mapMaxZoom);
//                var _mapCenter =map.unproject([3146,3034], mapMaxZoom);
                var _mapCenter =map.unproject([1612,1462], mapMaxZoom);
                map.setView(_mapCenter, mapMinZoom+1);
                self.map(map);

            };
            this.getMapSize=function(){
                return { height: 6068/2, width: 8858/2 };
            };
            this.getborderlatlng = function() {
                return { lat: 39.99848, lng: 116.3469 };
            };
            this.addlocation=function(){
                L.control.locate({
                    drawCircle:false,
                    showPopup:false,
                    onLocationError: function(err) {
                        self.statusbox.text('亲，定位出错了！');
                        self.statusbox.show(true);
                    },  // define an error callback function
                    onLocationOutsideMapBounds:  function(context) { // called when outside map boundaries
                        self.statusbox.text('亲，你不在景区内，赶紧去景区试试吧！');
                        self.statusbox.show(true);
                    },
                }).addTo(self.map());
            };
            this.addtileLayer=function(){
                var map=self.map();
                var mapsize = self.getMapSize();
//                var latlng = self.getborderlatlng();
                var mapMinZoom = map.getMinZoom();
                var mapMaxZoom = map.getMaxZoom();
                var mapBounds;
                if(! self.mapborder())
                {
                    var southWest = map.unproject([0, mapsize.height], map.getMaxZoom());
                    var northEast = map.unproject([mapsize.width, 0], map.getMaxZoom());


                    //移动地图到景区
//                    southWest.lat += latlng.lat;
//                    southWest.lng += latlng.lng;
//                    northEast.lat += latlng.lat;
//                    northEast.lng += latlng.lng;
                     mapBounds = new L.LatLngBounds(southWest, northEast);
                    self.setborder(mapBounds);
                }
                else
                {
                    mapBounds=self.mapborder();
                }
                L.tileLayer('images/map/{z}/{x}/{y}.png', {
                    minZoom: mapMinZoom, maxZoom: mapMaxZoom,
                    bounds: mapBounds,
//                    attribution: 'Rendered with <a href="http://www.maptiler.com/">MapTiler</a>',
                    noWrap: true
                }).addTo(map);
//                L.tileLayer('images/map/{z}/{x}/{y}.png', {
//                    minZoom: mapMinZoom, maxZoom: mapMaxZoom,
//                    bounds: mapBounds,
//                   // attribution: '由 <a href="https://twitter.com/jxiaox">jxiaox</a>提供',
//                    noWrap: true
//                }).addTo(map);


            };
            this.addScenicLayer=function(imageurl){

                var map=self.map();
                var mapsize = self.getMapSize();
                var latlng = self.getborderlatlng();


                var southWest = map.unproject([0, mapsize.height], map.getMaxZoom());
                var northEast = map.unproject([mapsize.width, 0], map.getMaxZoom());

//                //移动地图到景区
//                southWest.lat += latlng.lat;
//                southWest.lng += latlng.lng;
//                northEast.lat += latlng.lat;
//                northEast.lng += latlng.lng;

                var bounds = new L.LatLngBounds(southWest, northEast);
                self.mapborder(bounds);
                self.setborder(bounds);
                 new L.ImageOverlay(imageurl, bounds).addTo(map);
            };
            this.setborder=function(bounds){
                var map=self.map();
                map.setMaxBounds(bounds);
                //阻止拖出边界
                map.on('drag', function() {
                    map.panInsideBounds(bounds, { animate: true });
                });
            };
            this.bindevent=function(){
                var map=self.map();
                map
                        .on('zoom', function(event) {
                            console.log("map zoom :", event);
                        })
                        .on("locationfound", function(event) {

                            console.log("locationfound :", event);
                        })
                        .on("locationerror", function(event) {

                            console.log("locationerror :", event);
                        })
                        .on("popupopen", function(spot) {
                            console.log(spot);

                            //修改地图包样式.  这并不完美..

                                setTimeout(function(){
                                    $('.leaflet-popup-tip').addClass('has_point_detail');
                                }, 200);

                        })
                        .on('click', function(event) {
                            var map=self.map();


                            console.log("map click :", event);
                            var point=map.project(event.latlng);
                            console.log(point);
//                            console.log(event.containerPoint);

//                            var marker = L.marker(event.latlng).addTo(map);
                        });
            };



            this.loadData = function() {
                $.ajax({
                    url: '/WebServices/MapWebService.asmx/GetMarkers',
                    dataType: "json",
                    data: { wid: self.params().wid },
                    success: function(res) {
                        if (res.isSuccess) {
                            self.markers(res.data);
                            self.addmarkers();

                        } else {
                            console.log(res.message);
                        }
                    }
                });
            };



            self.view = function(marker) {
                document.location.href = marker.url;
            };
            self.goto = function(marker) {
                document.location.href = 'map_address.html?id=' + marker.id;
            };
            self.addmarkers=function(){
                var map=self.map();
                for(var i=0;i<self.markers().length;i++)
                {
                    var data=self.markers()[i];
                    var latlng= map.unproject( [data.left, data.top], map.getMaxZoom());
                  var marker = L.marker(latlng,{
                      bounceOnAdd: true,
                      bounceOnAddOptions: {duration:400*(i+1)+500, height: 100},
                      bounceOnAddCallback: function() {console.log("done");}
                  }).addTo(map);
                    marker.on('click', function (e) {
                        e.target.bounce({ height: 100});
                    });

//                    var marker = L.marker(self.getLatLng(data.left,data.top)).addTo(map);
                    var popup=self.getPopup(data.id);
                    marker.bindPopup(popup);
                }
            };
            self.getPopup=function(id){
                var content=$('#tip_'+id).html();
                var popup=new L.popup({
                    className:'tip',
                    closeButton:false
                });
                popup.setContent(content);
                return popup;
            };
            self.getLatLng= function(x,y){
                return self._XYToLatLng(x,y);
            };
            self._XYToLatLng= function(x,y){
                if(x instanceof  Array)
                    y = x[1],x = x[0];
//                var OE.Scenic.originalZoom=10;
                var originalZoom = 10 * 1.0;
                var maxSize = Math.pow(2,originalZoom+8) * 1.0;
                var mapsize = self.getMapSize(),
                        lat =  (y * mapsize.height  + (maxSize - mapsize.height)/2)/maxSize,
                        lng =  (x * mapsize.width  + (maxSize - mapsize.width)/2)/maxSize;
                return [-256 * lat,256 * lng];
            };
            self.togglemenu=function(){
                self.pointMenu.show(!self.pointMenu.show());

            };
            self.jumpUrl=function(url){
                document.location.href=url;
            };

            this.init();

        };


    </script>


<script>
    var params={wid:0};
    $(function () {
        $('.content').scrollTop(100);
        $('.content').scrollLeft(400);
        var wid=getQueryString('wid');
        if(wid)
        {
            params.wid=wid;
        }

        var viewModel = new ViewModel(params);
        ko.applyBindings(viewModel);
    });
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return (r[2]);
        return null;
    }

</script>
</body>
</html>
